<template>
  <view class="container">
    <view class="pix">
      <input type="number" v-model="user_id" />
      <button @click="hangUpCall">挂断123</button>
    </view>
    <iframe :src="webViewUrl" class="webview" ref="webviewRef"></iframe>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { sendMessage } from "@/util/websocket";

const webViewUrl = ref("");
let user_id = ref<any>(1);

// 处理 WebView 中的消息
const handlePeerConnectionMessage = (event: any) => {
  console.log(event);
  if (event.data.type == "startCall") {
    startCall(JSON.parse(event.data.localDescription));
  }
};

// 设置 webView 的 URL
/* #ifdef APP-PLUS */
const localPath = "_www/static/ts/webrtc/webrtc.html?v=2"; // 本地 HTML 文件路径
webViewUrl.value = plus.io.convertLocalFileSystemURL(localPath);
/* #endif */

/* #ifdef H5 */
webViewUrl.value = "/static/ts/webrtc/webrtc.html?v=" + new Date().getTime(); // H5 版本路径
/* #endif */

// 添加监听器来处理 WebView 中的消息
onMounted(() => {
  /* #ifdef H5 */
  // H5 环境下使用 window.addEventListener
  window.addEventListener("message", handlePeerConnectionMessage);
  /* #endif */

  /* #ifdef APP-PLUS */
  // App 环境下使用 plus.webview 监听消息
  const currentWebview = plus.webview.currentWebview();
  currentWebview.addEventListener("message", handlePeerConnectionMessage);
  /* #endif */
});

// 定义 startCall 方法
const startCall = (sdp: any) => {
  sendMessage({
    cmd: "webrtc",
    user_id: user_id.value,
    type: "answer",
    sdp: sdp,
  });
};

const webviewRef = ref(null); // 改成 webviewRef

// 挂断通话
const hangUpCall = () => {
  console.log(webviewRef.value, "发送消息到 WebView");

  // 使用 contentWindow.postMessage 发送消息
  const iframe = webviewRef.value;
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage(
      { type: "call-method", action: "hangUp" },
      "*"
    );
  } else {
    console.error("iframe 不具备 contentWindow 或 postMessage 方法");
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.webview {
  width: 100%;
  height: 100%;
  border: none; /* 去除边框 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
  overflow: hidden; /* 去除滚动条 */
}

.pix {
  position: relative;
  z-index: 10;
}
</style>
